<template>
  <view class="dy-scroll-container">
    <dy-navbar title="Marquee-跑马灯" />
    <scroll-view class="dy-scroll dy-flex-column" scroll-y>
      <!-- 基础用法 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="基础用法" desc="slot text" />
        <template slot="body">
          <dy-marquee :speed="60" :items="marqueeTexts" />
        </template>
      </dy-card>
      <!-- 图片轮播 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="图片轮播" desc="slot img" />
        <template slot="body">
          <dy-marquee :speed="60" :items="pics">
            <dy-img
              slot="item"
              slot-scope="{ item }"
              width="100%"
              height="440"
              mode="aspectFill"
              :custom-style="{ background: '#cccccc', width: 'calc(100vw - 52px)' }"
              :src="item"
            />
          </dy-marquee>
        </template>
      </dy-card>
      <!-- 垂直方向轮播 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="方向控制" desc="direction=bt(bottom to top)" />
        <template slot="body">
          <dy-marquee
            direction="bt"
            :speed="20"
            :custom-style="{ height: '14px' }"
            :items="marqueeTexts"
          />
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title" padding="0" title="方向控制" desc="direction=tb(top to bottom)" />
        <template slot="body">
          <dy-marquee
            direction="tb"
            :speed="20"
            :custom-style="{ height: '14px' }"
            :items="marqueeTexts"
          />
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title" padding="0" title="方向控制" desc="direction=rl(right to left)" />
        <template slot="body">
          <dy-marquee direction="rl" :speed="20" :items="marqueeTexts" />
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title" padding="0" title="方向控制" desc="direction=lr(left to right)" />
        <template slot="body">
          <dy-marquee direction="lr" :speed="20" :items="marqueeTexts" />
        </template>
      </dy-card>
      <!-- 图片垂直轮播 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="图片垂直轮播" desc="direction=bt" />
        <template slot="body">
          <dy-marquee custom-class="custom-height" :speed="100" direction="bt" :items="pics">
            <dy-img
              slot="item"
              slot-scope="{ item }"
              width="100%"
              height="440"
              mode="aspectFill"
              :custom-style="{ background: '#cccccc' }"
              :src="item"
            />
          </dy-marquee>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'MarqueeDemo',
  data() {
    return {
      marqueeTexts: [
        '江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。'
      ],
      pics: [
        require('../../../../static/img/271bea8f-aece-4265-a2c7-565cf6e863be.png'),
        require('../../../../static/img/c227f889-22f4-4506-9b41-3e6a60706564.png'),
        require('../../../../static/img/23c0cf6e-1d6d-4d03-b882-bbc5c5085ec8.png'),
        require('../../../../static/img/851359b6-a630-4b5a-b693-e36c704f52b3.png')
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .custom-height {
  height: 880rpx !important;
}
</style>
